<template>
    <div>
        <el-table :data="tableData" @sort-change="sortChange" border style="width: 100%" v-loading="loading"
            @cell-dblclick="celldblclick" @selection-change="handleSelectionChange"  @header-dragend="handleHeaderDragEnd" :height="tableHeight" ref="reftable"
            @row-contextmenu="rowcontextmenu">
            <el-table-column type="selection" width="50" align="center" header-align="center" v-if="isSelection"
                fixed="left">
            </el-table-column>

            <el-table-column type="index" label="序号" width="50" align="center" header-align="center" fixed="left">
            </el-table-column>

            <!-- start 目录检索 -->
            <el-table-column v-if="isRetrieval && sourceType != 1" label="操作" align="center"
                class-name="small-padding fixed-width" fixed="left">
                <template slot-scope="scope">
                    <el-tooltip class="item" effect="dark" content="借阅车" placement="bottom-start">
                        <el-button class="jieyueche" v-show="scope.row.is_borrowing_car == '1'" type="text"
                            icon="el-icon-shopping-cart-2" @click="handleBorrow(scope.row)"></el-button>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="借阅登记单" placement="top-start">
                        <el-button class="jieyueche" type="text" v-hasPermi="['archive:mljs:addDjad']"
                            icon="el-icon-tickets" @click="handleRegister(scope.row)"></el-button>
                    </el-tooltip>
                </template>
            </el-table-column>
            <!-- end 目录检索 -->
            <!-- start 全文检索 -->
            <el-table-column v-if="isRetrieval && sourceType == 1" label="操作" align="center"
                class-name="small-padding fixed-width" fixed="left">
                <template slot-scope="scope">
                    <el-tooltip class="item" effect="dark" content="借阅车" placement="bottom-start">
                        <el-button class="jieyueche" v-show="scope.row.is_borrowing_car == '1'" type="text"
                            icon="el-icon-shopping-cart-2" @click="handleBorrow(scope.row)"></el-button>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="借阅登记单" placement="top-start">
                        <el-button class="jieyueche" type="text" v-hasPermi="['archive:qwjs:addDjad']"
                            icon="el-icon-tickets" @click="handleRegister(scope.row)"></el-button>
                    </el-tooltip>
                </template>
            </el-table-column>
            <!-- end 全文检索 -->

            <!-- start 全文/目录检索 -->
            <el-table-column v-if="isRetrieval" label="类型" align="center" width="125" fixed="left">
                <template slot-scope="scope">
                    <el-select placeholder="请选择" v-model="scope.row.borrowType">
                        <el-option v-for="item in scope.row.typeOption" :key="item.value" :label="item.label"
                            :value="item.value"></el-option>
                    </el-select>
                </template>
            </el-table-column>
            <!-- end 全文/目录检索 -->
            <template >
                <el-table-column v-for="(col, index) in tableHeaderList" :key="index" :prop="col.FIELD_NAME"
                    :width="col.TH_WIDTH == 'null' || col.TH_WIDTH == 0 || col.TH_WIDTH == undefined ? 200 : col.TH_WIDTH"
                    :label="col.FIELD_CAPTION"
                    :align="col.TH_ALIGN == 'null' || col.TH_ALIGN == '' || col.TH_ALIGN == undefined ? 'center' : col.TH_ALIGN"
                    :header-align="col.TH_ALIGN == 'null' || col.TH_ALIGN == '' || col.TH_ALIGN == undefined ? 'center' : col.TH_ALIGN"
                    :sortable="sortable" show-overflow-tooltip :render-header="renderHeader">
                    <template slot-scope="scope">
                        <div v-if="scope.row[col.FIELD_NAME] != null">
                            <p v-html="scope.row[col.FIELD_NAME]"></p>
                        </div>
                    </template>
                </el-table-column>
            </template>


        </el-table>
    </div>
</template>
  
<script>
var datalist;
import { getTypeObject } from '@/api/archive/dict/dictManageData'
import { scrollFunction } from '@/utils/table-Scroll.js'
export default {

    //  props: ["tableHeaderList", "tableData", "loading", "tableHeight", "isRetrieval", "isOpenFinds"],
    props: {
        // :iskfjdorbgqx="0"  开放鉴定   :iskfjdorbgqx="1" 保管期限   :iskfjdorbgqx="2" 销毁
        iskfjdorbgqx: {
            type: [String, Number],
            default: 0
        },
        //isRyType  //判断初审标记分配还是复审标记分配
        isRyType: {
            type: [String, Number],
            default: 0
        },
        //isChuSHen      开放档案初审 列表是否展示，默认不展示，传true 是展示
        isChuSHen: {
            type: Boolean,
            default: false
        },
        //isFuSHen   开放档案复审 列表是否展示，默认不展示，传true 是展示
        isFuSHen: {
            type: Boolean,
            default: false
        },
        // isShending 开放审定 默认不展示，传true 是展示
        isShending: {
            type: Boolean,
            default: false
        },
        //isShenjl  审核记录 默认不展示，传true 是展示
        isShenjl: {
            type: Boolean,
            default: false
        },
        //开放档案鉴定  详情页面    默认不展示，传true 是展示
        isKFJDDetail: {
            type: Boolean,
            default: false
        },

        //开放档案鉴定  调档页面    默认不展示，传true 是展示
        isKFJDDD: {
            type: Boolean,
            default: false
        },
        // isSelection      复选框是否显示 false 隐藏  true 显示
        isSelection: {
            type: Boolean,
            default: true
        },
        // isProjectJuanList 操作  （修改是否显示） true 显示   false隐藏
        isProjectJuanList: {
            type: Boolean,
            default: false
        },
        loading: {
            type: Boolean,
            default: false
        },
        tableHeight: {
            type: [String, Number],
            default: {}
        },
        isRetrieval: {
            type: Boolean,
            default: false
        },
        isOpenFinds: {
            type: Boolean,
            default: false
        },
        tableHeaderList: {
            type: [Array, Object, String],
            default: {}
        },
        tableData: {
            type: [Array, Object, String],
            default: {}
        },
        sourceType: {
            type: String,
            default: ""
        },
    },
    archive_Dicts: ['MJ', 'BGQX', 'IS_OPENS', 'CSLY', 'JS_TYPE','DA_STATE'],
    watch: {
        tableData: {
            handler(val) {

            },
            immediate: true
        },

        //同步请求
        // tableHeaderList:{
        //     async handler(val) {
        //         for (var i = 0; i < this.tableHeaderList.length; i++) {
        //             if (this.tableHeaderList[i].SHOWTYPE == 5) {
        //                 await getDicts_archive(this.tableHeaderList[i].FIELD_NAME).then((res) => {
        //                     this.dictList[this.tableHeaderList[i].FIELD_NAME] = res.data;
        //                 })

        //             }
        //         }
        //          this.dictList=this.dictList;
        //          console.log(this.dictList,"+++")
        //     },
        //     immediate: true
        // }
        tableHeaderList: {
            handler(val) {
                var headerlist = [];
                for (var i = 0; i < this.tableHeaderList.length; i++) {
                    if (this.tableHeaderList[i].SHOWTYPE.toString().indexOf('5') != -1) {
                        this.tableHeaderList[i].SHOWTYPE = 5
                    }
                    if (this.tableHeaderList[i].SHOWTYPE == 5) {
                        // console.log(this.tableHeaderList[i])
                        headerlist.push(this.tableHeaderList[i].FIELD_NAME)
                    }
                }
                // console.log(headerlist,"++++")
                if (headerlist.length > 0) {
                    getTypeObject(headerlist).then((res) => {
                        this.dictList = res.data;
                    })
                }


            },
            immediate: true
        }
    },

    data() {
        return {
            ids: [],
            single: "",
            multiple: "",
            sortable: "custom",
            orderList: "",
            dictList: {},  //字典项

            /*1:预归档-未接收
            2:预归档-已接收
            3:数字化成果未接收
            4:归档审批中
            5:已归档
            6:移交审批中
            7:已移交
            8:销毁
            9:预归档审批中
            10:预归档*/
            stateOption: [
                { value: 1, label: '预归档-未接收' },
                { value: 2, label: '预归档-已接收' },
                { value: 3, label: '数字化成果未接收' },
                { value: 4, label: '归档审批中' },
                { value: 5, label: '已归档' },
                { value: 6, label: '移交审批中' },
                { value: 7, label: '已移交' },
                { value: 8, label: '销毁' },
                { value: 9, label: '预归档审批中' },
                { value: 10, label: '预归档' },
            ],

            // 1= 销毁  0=不销毁
            XH: [
                { value: "1", label: '销毁' },
                { value: "0", label: '不销毁' },
            ]

        }
    },
    mounted() {
        // 自己随便设置个id， el-table res="historyTable"
        this.$refs.reftable.bodyWrapper.id = 'historyshop'
        scrollFunction(this.domObj, 'historyshop')
    },
    updated() {
        this.$refs["reftable"].doLayout();
    },
    created() {

    },
    methods: {
        clearSort() {
            this.$refs.reftable.clearSort()    // 即可清除排序解决
        },
        //审查
        shengchaclick(row) {
            this.$emit("shengchaclick", row)
        },
        // 复选框判断不能选择
        checkboxTchu(row) {



            if (row.CHUSHEN_JIANDING == null) {
                return false;//禁用
            } else {
                return true;//不禁用
            }


        },


        // 复选框判断不能选择
        checkboxTfu(row) {


            if (row.FUSHEN_JIANDING == null) {
                return false;//禁用
            } else {
                return true;//不禁用
            }




        },

        //修改 type
        onBlurDeitTap(val, type) {
            if (type == 1) {
                for (var i in this.tableData) {
                    if (this.tableData[i].ID == val.ID) {
                        this.tableData[i].CHUSHEN_LIYOU = ""
                    }
                }

            }
            console.log(val, "+++")
            this.$emit("onBlurDeitTap", val, type)
        },
        // 表头部重新渲染
        renderHeader(h, { column, $index }) {
            // 新建一个 span
            let span = document.createElement('span');
            // 设置表头名称
            span.innerText = column.label;
            // 临时插入 document
            document.body.appendChild(span);
            // 重点：获取 span 最小宽度，设置当前列，注意这里加了 20，字段较多时还是有挤压，且渲染后的 div 内左右 padding 都是 10，所以 +20 。（可能还有边距/边框等值，需要根据实际情况加上）
            column.minWidth = span.getBoundingClientRect().width + 120;
            // 移除 document 中临时的 span
            document.body.removeChild(span);

            // var element = document.querySelector('.el-table__body-wrapper');
            // element.style.height = this.tableHeight - 52 + "px"

            return h('span', column.label);
        },


        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.ID)
            this.single = selection.length !== 1
            this.multiple = !selection.length
            this.$emit("handleSelectionChange", this.ids, this.single, this.multiple, selection)
        },


        //双击进入详情
        celldblclick(row, column, cell, event) {
            if (this.isRetrieval) {
                // if (row.is_borrowing_car == '0') {
                    if (event.type === "dblclick") {
                        //  console.log(row,column,cell,event)
                        this.$emit("celldblclick", row)
                    }
                 }
            // } else {
            //     if (event.type === "dblclick") {
            //         //  console.log(row,column,cell,event)
            //         this.$emit("celldblclick", row)
            //     }
            // }
        },
        //开放审定查看
        handleQuery(row) {
            this.$emit("celldblclick", row)
        },
        // 接受一个obj参数
        sortChange(obj) {
            console.log(obj)  // 排序规则
            if (obj.order != null) {
                this.orderList = obj.prop + " " + obj.order.substring(0, obj.order.length - 6)
            } else {
                this.orderList = ""
            }

            // if (obj.order != null) {
            //     var order = obj.order.substring(0, obj.order.length - 6)
            //     if (this.orderList.length <= 0) {
            //         this.orderList.push({
            //             prop: obj.prop,
            //             order: order
            //         })
            //     } else {
            //         for (var i in this.orderList) {
            //             if (this.orderList[i].prop == obj.prop) {
            //                 this.orderList[i].order = order
            //             }
            //         }
            //     }
            // } else {
            //     for (var i in this.orderList) {
            //         if (this.orderList[i].prop == obj.prop && obj.order == null) {
            //             this.orderList.splice(i, 1)
            //         }
            //     }
            // }
            // console.log(this.orderList, "dsfjkl")
            this.$emit("sortChange", this.orderList)

        },

        // 借阅车
        handleBorrow(row) {
            this.$emit('handleBorrow', row)
        },

        //标记分配
        changeCheckBoxTap(value, row) {
            this.$emit("changeCheckBoxTap", value, row)
        },

        //项目下修改卷列表
        handleProjectJuanDeit(row) {
            this.$emit("handledeitTap", row)
        },

        //调整审定结果
        handleSDJGDeit(row) {
            this.$emit("handleSDJGDeit", row)
        },

        rowcontextmenu(row) {
            if (this.isRetrieval == true) {
                event.preventDefault()
                this.$emit("rowcontextmenu", row)
            }
        },

        // 登记单
        handleRegister(row) {
            this.$emit("handleRegister", row)
        },
            //拖拽刷新头部
    handleHeaderDragEnd(newWidth, oldWidth, column) {  
      // const { draggingColumn, startWidth, endWidth } = dragState;
      // 当列宽调整结束后，检查列宽是否超出最小宽度
      if (newWidth < this.minWidth) {
        // 如果超出，则将列宽重置为最小宽度
        // draggingColumn.width = this.minWidth;
        // 可以调用Element的内部方法来更新列宽
        // 注意：这种方式可能会引起不稳定，因为它依赖于Element UI的内部实现
 
          this.$refs.reftable.doLayout();
        

     //   this.$emit('headerDragend', { width: this.minWidth, prop: column.property })
      }

      this.$refs.reftable.doLayout();
    },

    }
}
</script>
<style lang="scss" scoped>
.jieyueche {
    font-size: 18px;
    padding: 0;
    margin: 5%;
}

td>div {
    width: auto !important;
}
</style>
  